<h1 class="page-title-actions">
  Tasks
  <span class="actions">
    <button type="button" class="btn btn-sm btn-primary" (click)="createTask()" [appRole]="['ROLE_CREATE']">
      Create task
    </button>
    <button type="button" class="btn btn-sm btn-secondary" grafanaDashboardTasks>
      Grafana Dashboard
    </button>
    <button type="button" class="btn btn-sm btn-secondary" wavefrontDashboardTasks>
      Wavefront Dashboard
    </button>
  </span>
</h1>

<clr-datagrid (clrDgRefresh)="refresh($event)" [clrDgLoading]="loading" [(clrDgSelected)]="!grouped ? null : selected"
              *ngIf="isInit" #datagrid>
  <clr-dg-action-bar *ngIf="grouped">
    <button type="button" class="btn btn-sm btn-outline-danger" (click)="setMode(false)">
      Cancel
    </button>
    <button type="button" [disabled]="selected?.length === 0" class="btn btn-sm btn-secondary"
            (click)="scheduleTasks(selected)" [appRole]="['ROLE_SCHEDULE']" appFeature="schedules">
      Schedule task(s)
    </button>
    <button type="button" [disabled]="selected?.length === 0" class="btn btn-sm btn-secondary"
            (click)="destroyTasks(selected)" [appRole]="['ROLE_DESTROY']">
      Destroy task(s)
    </button>
  </clr-dg-action-bar>
  <clr-dg-action-bar *ngIf="!grouped">
    <button type="button" class="btn btn-sm btn-secondary" (click)="setMode(true)"
            [appRole]="['ROLE_DESTROY', 'ROLE_SCHEDULE']">
      Group Actions
    </button>
    <button type="button" class="btn btn-sm btn-secondary" (click)="refresh(state)">
      Refresh
    </button>
  </clr-dg-action-bar>
  <clr-dg-column [clrDgField]="'taskName'"
                 [clrDgSortOrder]="(context.by === 'taskName') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeName', $event)"
                 [style.width.px]="context.sizeName | datagridcolumn: datagrid : contextName : 15 | async"
                 [clrFilterValue]="context.taskName">
    <ng-container>
      Name
    </ng-container>
  </clr-dg-column>
  <clr-dg-column (clrDgColumnResize)="updateContext('sizeDescription', $event)"
                 [style.width.px]="context.sizeDescription | datagridcolumn: datagrid : contextName : 15 | async">
    <ng-container>
      Description
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'dslText'"
                 [clrDgSortOrder]="(context.by === 'dslText') ? context.reverse ? -1 : 1 : 0"
                 (clrDgColumnResize)="updateContext('sizeDsl', $event)"
                 [style.width.px]="context.sizeDsl | datagridcolumn: datagrid : contextName : 15 | async">
    <ng-container>
      Definition
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-column (clrDgColumnResize)="updateContext('sizeStatus', $event)"
                 [style.width.px]="context.sizeStatus | datagridcolumn: datagrid : contextName : 15 | async">
    <ng-container>
      Status
    </ng-container>
    <clr-dg-filter style="display:none;"></clr-dg-filter>
  </clr-dg-column>
  <clr-dg-row *ngFor="let task of page?.items" [clrDgItem]="task" [clrDgSelectable]="!task.composedTaskElement">
    <clr-dg-cell>
      <a class="text-truncate" routerLink="/tasks-jobs/tasks/{{task.name}}">
        {{task.name}}
      </a>
    </clr-dg-cell>
    <clr-dg-cell><span class="text-truncate">{{task.description}}</span></clr-dg-cell>
    <clr-dg-cell><span class="dsl-text dsl-truncate">{{task.dslText}}</span></clr-dg-cell>
    <clr-dg-cell><span class="{{task.labelStatusClass()}}">{{task.status}}</span></clr-dg-cell>
    <clr-dg-action-overflow *ngIf="!grouped">
      <button class="action-item" (click)="details(task)">Details</button>
      <button class="action-item" (click)="launch(task)" [appRole]="['ROLE_DEPLOY']">Launch</button>
      <button class="action-item" (click)="schedule(task)" [appRole]="['ROLE_SCHEDULE']" appFeature="schedules"
              [disabled]="task.composedTaskElement">
        Schedule
      </button>
      <button class="action-item" (click)="destroyTasks([task])" [appRole]="['ROLE_DESTROY']"
              [disabled]="task.composedTaskElement">Destroy
      </button>
      <button class="action-item" grafanaDashboardTask [task]="task">
        Grafana Dashboard
      </button>
      <button class="action-item" wavefrontDashboardTask [task]="task">
        Wavefront Dashboard
      </button>
    </clr-dg-action-overflow>
  </clr-dg-row>
  <clr-dg-placeholder>No results found.</clr-dg-placeholder>
  <clr-dg-footer>
    <clr-dg-pagination #pagination [clrDgTotalItems]="page?.total"
                       [clrDgPageSize]="context.size" [clrDgPage]="context.current">
      <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">Tasks per page</clr-dg-page-size>
      {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
      of {{page?.total}} tasks
    </clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

<app-task-destroy #destroyModal (onDestroyed)="refresh(state)"></app-task-destroy>
